<script setup lang="ts">
import { ref } from 'vue'

const myModal = ref()
const imgList = ref([])

const showModal = (jsonImgList:any) => {
  imgList.value = jsonImgList
  myModal.value?.showModal()
}

defineExpose({
  showModal,
})
</script>

<template>
    <MyModal ref="myModal" title="图片" :width="900">
        <template #content>
            <a-carousel arrows>
                <template #prevArrow>
                    <div class="leftArrow" style="left: 10px; z-index: 1">
                        <LeftOutlined />
                    </div>
                </template>
                <template #nextArrow>
                    <div class="rightArrow" style="right: 10px">下一个</div>
                </template>

                <div class="imgBox" v-for="(item, index) in imgList" :key="index">
                    <img :src="item.ticket" />
                </div>
            </a-carousel>
        </template>
    </MyModal>
</template>

<style scoped lang="less">
.imgBox {
  height: 700px;
  // background: pink;
  img {
    margin: 0 auto;
    height: 100%;
    max-width: 700px;
  }
}

.leftArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-top: 20px solid #8f39cc;
  transform: rotate(-135deg);
}

.rightArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-top: 20px solid #8f39cc;
  transform: rotate(45deg);
}

// /deep/ .ant-carousel .slick-dots li {
//   background: #9400fd !important;
//   bottom: 10px;
// }
</style>
